<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>问卷统计</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-table-body.layui-table-main {
        height: 580px !important;
    }

    .layui-table th {
        background-color: rgb(199 217 234 / 78%); /* 设置表头的背景颜色 */
        color: #2e2e2e; /* 设置表头的文本颜色 */
        font-weight: bold;
    }

    .layui-table tbody tr:nth-child(odd) {
        background-color: #ffffff; /* 设置奇数行的背景颜色 */
    }

    .layui-table tbody tr:nth-child(even) {
        background-color: rgba(239, 239, 239, 0.94); /* 设置偶数行的背景颜色 */
    }

    .layui-table td, .layui-table th {
        border: 1px solid #e6e6e6; /* 边框颜色 */
    }

    .layui-table td, .layui-table th {
        border-width: 2px; /* 设置双边框效果 */
    }
</style>
<body>
<!-- 正文开始 -->
<div id="openStatisticsBox" style="padding: 5px;">
    <!-- 表格工具栏 -->
    <form class="layui-form toolbar">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">所属单位:</label>
                <div class="layui-input-block" style="width: 200px">
                    <div id="orgSelectBox" class="ew-xmselect-tree"></div>
                </div>
            </div>
            <div class="layui-inline">&emsp;
                <button class="layui-btn icon-btn" lay-filter="tableSearch" lay-submit>
                    <i class="layui-icon">&#xe615;</i>查询
                </button>
                <button type="reset" class="layui-btn layui-btn-primary icon-btn">
                    <i class="layui-icon">&#xe669;</i>重置
                </button>
            </div>
        </div>
    </form>
    <table id="openStatisticsTable" lay-filter="openStatisticsTable"></table>
</div>

<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script>
    layui.use(['layer', 'form', 'admin', 'table', 'tableX', 'xnUtil', 'xmSelect', 'laydate', 'upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var admin = layui.admin;
        var xmSelect = layui.xmSelect;
        var form = layui.form;

        var testpaperId = GetQueryString("testpaperId");

        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var insTb = table.render({
            elem: '#openStatisticsTable',
            /*id: 'openStatisticsTable',*/
            height: 480,
            method: 'get', //接口http请求类型，默认：get
            url: getProjectUrl() + 'testpaper/statisticsInfo',
            where: {
                testpaperId: testpaperId
            },
            toolbar: ['<p>',
                '<button lay-event="answerAnisy" perm-show="testpaper:answerAnisy" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe67d;</i>问答统计分析</button>&nbsp;',
                '<button lay-event="statisticsInfoExp" perm-show="testpaper:statisticsInfoExp" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe67d;</i>问卷统计导出</button>&nbsp;',
                '</p>'].join(''),
            page: false, //是否分页
            cols: [
                [
                    {field: 'number', title: '序号', type: 'numbers'},
                    {field: 'title', title: '调查内容', width: 300, sort: false,},
                    {field: 'type_A', title: '好', sort: false},
                    {field: 'percentage_A', title: '占%', sort: false},
                    {field: 'type_B', title: '较好', sort: false},
                    {field: 'percentage_B', title: '占%', sort: false},
                    {field: 'type_C', title: '一般', sort: false},
                    {field: 'percentage_C', title: '占%', sort: false},
                    {field: 'type_D', title: '不好', sort: false},
                    {field: 'percentage_D', title: '占%', sort: false},
                ]
            ],
            parseData: function (res) { // res 即为原始返回的数据
                return {
                    "code": 0, // 解析接口状态
                    "msg": "", // 解析提示文本
                    "count": res.length, // 解析数据长度
                    "data": res // 解析数据列表
                };
            },
            done: function (res, curr, count) {
                // insTb.tableDone(insTb, res, curr, count);
            }
        });
        form.on('submit(tableSearch)', function (data) {
            insTb.reload({where: data.field, page: {curr: 1}});
            return false;
        });
        // table.exportFile(insTb.config.id, exportData, 'xlsx','问卷统计');
        var orgTreeRenderIns = {};
        admin.req(getProjectUrl() + 'testpaper/queryOrgNames', {
            testpaperId: testpaperId
        }, function (arr) {
            admin.req(getProjectUrl() + 'sysOrg/tree', function (res) {
                let data = repTreeTitle(res.data, arr)
                // 渲染下拉树
                orgTreeRenderIns = xmSelect.render({
                    el: '#orgSelectBox',
                    name: 'orgId',
                    height: '250px',
                    layVerify: 'required',
                    layVerType: 'tips',
                    data: data,
                    initValue: [],
                    model: {label: {type: 'text'}},
                    prop: {
                        name: 'title',
                        value: 'id'
                    },
                    radio: true,
                    clickClose: true,
                    tree: {
                        show: true,
                        indent: 15,
                        strict: false,
                        expandedKeys: true
                    },
                    tips: '请选择机构'
                });
            }, {async: false});
        }, {async: false});

        form.on('select(orgId)', function (data) {
            alert(data.value);
        })
        table.on('toolbar(openStatisticsTable)', function (obj) {
            if (obj.event === 'answerAnisy') {
                showAnswerModel(testpaperId);
            }
            if (obj.event === 'statisticsInfoExp') {
                statisticsInfoExp(testpaperId);
            }
        });

        function statisticsInfoExp(testpaperId) {
            let orgId = orgTreeRenderIns.getValue('value')[0];
            if (!orgId) {
                orgId = "";
            }
            window.open(getProjectUrl() + "testpaper/statisticsInfoExp?testpaperId=" + testpaperId + "&orgId=" + orgId);
        }

        function showAnswerModel(testpaperId) {
            var orgId = orgTreeRenderIns.getValue('value')[0];
            if (orgId == undefined) {
                orgId = "";
            }
            layer.open({
                top: 50,
                type: 2,
                title: '问答统计',
                area: ['900px', '500px'], //宽高
                content: getProjectUrl() + 'sysQuestionnaire/statisticsAnswer?testpaperId=' + testpaperId + "&orgId=" + orgId,
                end: function () {
                },
                success: function () {

                }
            });
        }

        //替换树名称
        function repTreeTitle(data, arr) {
            return data.map(obj => {
                if (arr.includes(obj.title)) {
                    obj.title = obj.title + "<a style='color: #0a84ff' title='11'>（已参加）</a>"
                }
                let result = obj;
                if (obj.children && obj.children.length > 0) {
                    result.children = repTreeTitle(obj.children, arr)
                    return result
                } else {
                    return result
                }
            });
        }
    });
</script>
</body>
</html>
